<template>
	<div class="modal" v-show="show">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button class="close" v-on:click="dismiss"><span>&times;</span></button>
					<p class="header-title">账单详情</p>
				</div>
				<div class="modal-body">
					<div class="ditem">
						<label>金额: {{ amountDescription }}</label>
					</div>
					<div class="ditem">
						<label>类型: {{ typeDescription }}</label>
					</div>
					<div class="ditem">
						<label>用途: {{ purpose }}</label>
					</div>
					<div class="ditem">
						<label>日期: {{ dateDescription }}</label>
					</div>
					<div class="ditem">
						<label>所有者: {{ owner }}</label>
					</div>
					<div class="ditem">
						<label>状态: {{ stateDescription }}</label>
					</div>
					<div class="ditem" v-if="isAdmin">
						<button class="btn" v-on:click="clearAccount">清帐</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {bus} from '../main.js'

function daysAhead(date){
	return parseInt((new Date().getTime() - date.getTime()) / 86400000)
}

export default {
	name: 'accdetailmodal',
	data (){
		return {
			accountID: 0,
			isAdmin: false,
			isIncome: false,
			amount: 0,
			purpose: '',
			timeStamp: 0,
			owner: '',
			isCleared: false,
			show: false
		}
	},
	methods: {
		clearAccount: function(){
			this.isCleared = true
			window.delegate.clearAccount(this.accountID)
		},
		dismiss: function(){
			this.accountID = 0
			this.isAdmin = false
			this.amount = 0
			this.isIncome = false
			this.isCleared = false
			this.owner = ''
			this.purpose = ''
			this.timeStamp = 0
			this.show = false
		}
	},
	computed: {
		typeDescription: function(){
			if(this.isIncome){
				return '收入'
			}else{
				return '支出'
			}
		}, 

		dateDescription: function(){
			let date = new Date(this.timeStamp)
			let ahead = daysAhead(date)
			let hour = date.getHours()
			let minute = date.getMinutes()
			if(minute < 10){
				minute = '0' + minute.toString()
			}
			if(ahead == 0){
				return `今天${hour}: ${minute}`
			}else if(ahead == 1){
				return `昨天${hour}: ${minute}`
			}else if(ahead == 2){
				return `前天${hour}: ${minute}`
			}else{
				let month = date.getMonth() + 1
				let day = date.getDate()
				return `${month}月${day}日 ${hour}:${minute}`
			}
		},

		stateDescription: function(){
			if(this.isCleared){
				return '已清帐'
			}else{
				return '未清帐'
			}
		},

		amountDescription: function(){
			let amount = Math.abs(this.amount)
			return `${amount} 元`
		}

	},
	mounted: function(){
		bus.$on('show_detail_modal', function(accountID){
			let account = window.delegate.getAccount(accountID)
			this.accountID = accountID
			this.amount = account.amount
			this.purpose = account.purpose
			this.isIncome = this.amount < 0
			this.timeStamp = account.timeStamp
			this.owner = account.owner
			this.isCleared = account.cleared
			this.isAdmin = window.delegate.isAdmin
			this.show = true
		}.bind(this))
	}
}
</script>

<style scoped>
.modal {
	background-color: rgba(133,133,133,0.3);
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	outline: 0;
	z-index: 1001;
	opacity: 1;
	box-sizing: border-box;
}

.modal-dialog {
	margin: 200px auto;
	position: relative;
	width: 300px;
}

.modal-header{
	padding: 0px;
	border-bottom-color: rgba(1,1,1,0.2);
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

.modal-content{
	background-color: white;
	border-radius: 6px;
	border: 1px solid gray;
	box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px 0px;
}

.modal-body{
	padding-top: 20px;
	padding-bottom: 10px;
}

.btn{
	height: 35px;
	width: 230px;
	border: 2px solid darkblue;
	border-radius: 5px;
}

.inputbox{
	height: 30px;
	width: 220px;
	border: 2px solid darkred;
	margin-top: 5px;
	margin-bottom: 5px;
	border-radius: 5px;
	padding-left: 5px;
	font-size: 16px;
}

.header-title{
	color: black;
	top: -5px;
}

.close{
	float: right;
	font-size: 21px;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-weight: bold;
	line-height: 1;
	opacity: .5;
	position: relative;
	top: 8px;
	right: 5px;
}

.ditem{
	text-align: center;
}
</style>